
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-xiangyou"></i>
                    <div class="name">向右</div>
                    <div class="fontclass">.icon-xiangyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontleft2"></i>
                    <div class="name">向左</div>
                    <div class="fontclass">.icon-iconfontleft2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-service"></i>
                    <div class="name">服务</div>
                    <div class="fontclass">.icon-msnui-service</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanquan"></i>
                    <div class="name">圆圈</div>
                    <div class="fontclass">.icon-yuanquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jia"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-jia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-you"></i>
                    <div class="name">右</div>
                    <div class="fontclass">.icon-you</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mainiconteam"></i>
                    <div class="name">方向盘</div>
                    <div class="fontclass">.icon-mainiconteam</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-place"></i>
                    <div class="name">地点</div>
                    <div class="fontclass">.icon-place</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jian-copy"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-jian-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quhuazhibiao"></i>
                    <div class="name">区划指标</div>
                    <div class="fontclass">.icon-quhuazhibiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiafashuju"></i>
                    <div class="name">下发数据</div>
                    <div class="fontclass">.icon-xiafashuju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icjiashicang24px"></i>
                    <div class="name">ic_驾驶舱_24px</div>
                    <div class="fontclass">.icon-icjiashicang24px</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shandian"></i>
                    <div class="name">闪电</div>
                    <div class="fontclass">.icon-shandian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-didian"></i>
                    <div class="name">地点</div>
                    <div class="fontclass">.icon-didian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shexiangtou"></i>
                    <div class="name">摄像头</div>
                    <div class="fontclass">.icon-shexiangtou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiche"></i>
                    <div class="name">汽车</div>
                    <div class="fontclass">.icon-qiche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ditu"></i>
                    <div class="name">地图</div>
                    <div class="fontclass">.icon-ditu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-crm12"></i>
                    <div class="name">分发</div>
                    <div class="fontclass">.icon-crm12</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinzhi"></i>
                    <div class="name">禁止</div>
                    <div class="fontclass">.icon-jinzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengque"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.icon-zhengque</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenfa"></i>
                    <div class="name">分发</div>
                    <div class="fontclass">.icon-fenfa</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei4"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian"></i>
                    <div class="name">事件</div>
                    <div class="fontclass">.icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quanbu-copy"></i>
                    <div class="name">全部</div>
                    <div class="fontclass">.icon-quanbu-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiche3"></i>
                    <div class="name">汽车</div>
                    <div class="fontclass">.icon-qiche3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lishiyunxingjilu"></i>
                    <div class="name">历史运行记录</div>
                    <div class="fontclass">.icon-lishiyunxingjilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paizhao"></i>
                    <div class="name">拍照</div>
                    <div class="fontclass">.icon-paizhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconstop"></i>
                    <div class="name">停止</div>
                    <div class="fontclass">.icon-iconstop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiche2"></i>
                    <div class="name">汽车</div>
                    <div class="fontclass">.icon-qiche2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon53"></i>
                    <div class="name">右</div>
                    <div class="fontclass">.icon-icon53</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang1"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lixian"></i>
                    <div class="name">离线</div>
                    <div class="fontclass">.icon-lixian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zaixian"></i>
                    <div class="name">在线</div>
                    <div class="fontclass">.icon-zaixian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-right"></i>
                    <div class="name">H5-右</div>
                    <div class="fontclass">.icon-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-left"></i>
                    <div class="name">H5-左</div>
                    <div class="fontclass">.icon-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shaixuan"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.icon-shaixuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anonymous-iconfont"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-anonymous-iconfont</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon--jia"></i>
                    <div class="name">-加</div>
                    <div class="fontclass">.icon--jia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei5"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangxiangpan1"></i>
                    <div class="name">方向盘</div>
                    <div class="fontclass">.icon-fangxiangpan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lishijilu"></i>
                    <div class="name">3历史记录</div>
                    <div class="fontclass">.icon-lishijilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xianluqiehuan"></i>
                    <div class="name">线路切换</div>
                    <div class="fontclass">.icon-xianluqiehuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanting1"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-zanting1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanjing2"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-yanjing2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanquan1"></i>
                    <div class="name">圆圈</div>
                    <div class="fontclass">.icon-yuanquan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shang"></i>
                    <div class="name">上</div>
                    <div class="fontclass">.icon-shang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huifu"></i>
                    <div class="name">回复</div>
                    <div class="fontclass">.icon-huifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixing"></i>
                    <div class="name">卫星</div>
                    <div class="fontclass">.icon-weixing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weizhituodong"></i>
                    <div class="name">位置拖动</div>
                    <div class="fontclass">.icon-weizhituodong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test"></i>
                    <div class="name">轨迹</div>
                    <div class="fontclass">.icon-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuo-copy"></i>
                    <div class="name">左</div>
                    <div class="fontclass">.icon-zuo-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paizhao1"></i>
                    <div class="name">拍照</div>
                    <div class="fontclass">.icon-paizhao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kongzhiquan"></i>
                    <div class="name">控制权</div>
                    <div class="fontclass">.icon-kongzhiquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei1"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanquan2"></i>
                    <div class="name">圆圈</div>
                    <div class="fontclass">.icon-yuanquan2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lukuang"></i>
                    <div class="name">路况</div>
                    <div class="fontclass">.icon-lukuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neirong"></i>
                    <div class="name">内容</div>
                    <div class="fontclass">.icon-neirong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yincang"></i>
                    <div class="name">隐藏</div>
                    <div class="fontclass">.icon-yincang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guijiguanli1"></i>
                    <div class="name">4轨迹管理</div>
                    <div class="fontclass">.icon-guijiguanli1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guijiguanli"></i>
                    <div class="name">4轨迹管理</div>
                    <div class="fontclass">.icon-guijiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinxinicon"></i>
                    <div class="name">方向盘</div>
                    <div class="fontclass">.icon-xinxinicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanjing"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-yanjing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close2-copy"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-close2-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangqing"></i>
                    <div class="name">详情</div>
                    <div class="fontclass">.icon-xiangqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huifu1"></i>
                    <div class="name">回复</div>
                    <div class="fontclass">.icon-huifu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-luxiang1"></i>
                    <div class="name">录像</div>
                    <div class="fontclass">.icon-luxiang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanjing1"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-yanjing1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lukuang1"></i>
                    <div class="name">路况</div>
                    <div class="fontclass">.icon-lukuang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei3"></i>
                    <div class="name">定位 (3)</div>
                    <div class="fontclass">.icon-dingwei3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hangzhengquhua"></i>
                    <div class="name">行政区划</div>
                    <div class="fontclass">.icon-hangzhengquhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengque1"></i>
                    <div class="name">正确 (1)</div>
                    <div class="fontclass">.icon-zhengque1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hangzhengquhua1"></i>
                    <div class="name">行政区划</div>
                    <div class="fontclass">.icon-hangzhengquhua1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo1"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanquan3"></i>
                    <div class="name">圆圈</div>
                    <div class="fontclass">.icon-yuanquan3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei7"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei7</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuo"></i>
                    <div class="name">左</div>
                    <div class="fontclass">.icon-zuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanquan4"></i>
                    <div class="name">圆圈</div>
                    <div class="fontclass">.icon-yuanquan4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-genzong-"></i>
                    <div class="name">跟踪</div>
                    <div class="fontclass">.icon-genzong-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiankong"></i>
                    <div class="name">监控</div>
                    <div class="fontclass">.icon-jiankong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hujidihangzhengquhuadaima"></i>
                    <div class="name">户籍地行政区划代码</div>
                    <div class="fontclass">.icon-hujidihangzhengquhuadaima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xianzhudihangzhengquhuadaima"></i>
                    <div class="name">现住地行政区划代码</div>
                    <div class="fontclass">.icon-xianzhudihangzhengquhuadaima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei6"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei6</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jian"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-jian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaopian"></i>
                    <div class="name">照片 (1)</div>
                    <div class="fontclass">.icon-zhaopian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiche1"></i>
                    <div class="name">汽车</div>
                    <div class="fontclass">.icon-qiche1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shexiangtou1"></i>
                    <div class="name">摄像头</div>
                    <div class="fontclass">.icon-shexiangtou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian1"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaopian1"></i>
                    <div class="name">照片 (1) (1)</div>
                    <div class="fontclass">.icon-zhaopian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengque2"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.icon-zhengque2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaopian2"></i>
                    <div class="name">照片</div>
                    <div class="fontclass">.icon-zhaopian2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shebeiguijihuifang"></i>
                    <div class="name">设备轨迹回放</div>
                    <div class="fontclass">.icon-shebeiguijihuifang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangqing1"></i>
                    <div class="name">详情</div>
                    <div class="fontclass">.icon-xiangqing1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test1"></i>
                    <div class="name">轨迹查询</div>
                    <div class="fontclass">.icon-icon-test1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinchu"></i>
                    <div class="name">进出</div>
                    <div class="fontclass">.icon-jinchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guijihuifang"></i>
                    <div class="name">轨迹回放</div>
                    <div class="fontclass">.icon-guijihuifang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhongdiangenzong"></i>
                    <div class="name">重点跟踪</div>
                    <div class="fontclass">.icon-zhongdiangenzong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhankai"></i>
                    <div class="name">下</div>
                    <div class="fontclass">.icon-zhankai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei8"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei8</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neirong1"></i>
                    <div class="name">内容</div>
                    <div class="fontclass">.icon-neirong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo21"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo21</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei10"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei10</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo3"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huomiaohuoreredianhuobaoxianxing"></i>
                    <div class="name">火苗 火热 热点 火爆 线性</div>
                    <div class="fontclass">.icon-huomiaohuoreredianhuobaoxianxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jia1"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-jia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiye2"></i>
                    <div class="name">企业</div>
                    <div class="fontclass">.icon-qiye2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon--ningboshihaiyanggongnengquhuaheweitianhaiguanlixitong"></i>
                    <div class="name">4-5宁波市海洋功能区划和围填海管理系统</div>
                    <div class="fontclass">.icon--ningboshihaiyanggongnengquhuaheweitianhaiguanlixitong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-genzong1"></i>
                    <div class="name">跟踪</div>
                    <div class="fontclass">.icon-genzong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingling"></i>
                    <div class="name">警铃</div>
                    <div class="fontclass">.icon-jingling</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuli"></i>
                    <div class="name">tuli</div>
                    <div class="fontclass">.icon-tuli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipingxunjian"></i>
                    <div class="name">shipingxunjian</div>
                    <div class="fontclass">.icon-shipingxunjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongjifenxi"></i>
                    <div class="name">tongjifenxi</div>
                    <div class="fontclass">.icon-tongjifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-buildings2"></i>
                    <div class="name">企业</div>
                    <div class="fontclass">.icon-buildings2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo5"></i>
                    <div class="name">卡汇-搜索</div>
                    <div class="fontclass">.icon-sousuo5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi5"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaopian_"></i>
                    <div class="name">照片</div>
                    <div class="fontclass">.icon-zhaopian_</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei9"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei9</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei2"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei11"></i>
                    <div class="name">定位  默认#064584  click_#002c58</div>
                    <div class="fontclass">.icon-dingwei11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingtai"></i>
                    <div class="name">平台</div>
                    <div class="fontclass">.icon-pingtai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanquan5"></i>
                    <div class="name">圆圈</div>
                    <div class="fontclass">.icon-yuanquan5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei12"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei12</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengque-copy-copy"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.icon-zhengque-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo2"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei13"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei13</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei21"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei21</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei22"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei22</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei14"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei14</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hangzhengquhua2"></i>
                    <div class="name">行政区划</div>
                    <div class="fontclass">.icon-hangzhengquhua2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-toggle"></i>
                    <div class="name">路况</div>
                    <div class="fontclass">.icon-toggle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei15"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei15</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xia"></i>
                    <div class="name">下</div>
                    <div class="fontclass">.icon-xia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengque3"></i>
                    <div class="name">提示_正确</div>
                    <div class="fontclass">.icon-zhengque3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-neirongxiangqing"></i>
                    <div class="name">内容详情</div>
                    <div class="fontclass">.icon-neirongxiangqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian2"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei16"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei16</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei17"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei17</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-level"></i>
                    <div class="name">星星</div>
                    <div class="fontclass">.icon-level</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinanhaiyugongnengquhuafenjiedian"></i>
                    <div class="name">近岸海域功能区划分界点</div>
                    <div class="fontclass">.icon-jinanhaiyugongnengquhuafenjiedian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-content-specification"></i>
                    <div class="name">内容规范</div>
                    <div class="fontclass">.icon-content-specification</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-honglvdeng"></i>
                    <div class="name">honglvdeng</div>
                    <div class="fontclass">.icon-honglvdeng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leixing"></i>
                    <div class="name">类型</div>
                    <div class="fontclass">.icon-leixing</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
